<!-- Header
================================================== -->
<header id="nav-bar" class="container-fluid">
   <div class="row-fluid">
      <div class="span8">
         <div id="header-container">
            <a id="backbutton" class="win-backbutton" href="./tiles-templates.html"></a>
            <h5>{{appname}}</h5>
            <div class="dropdown">
               <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                  {{_i}}Wide Tiles Templates{{/i}}
                  <b class="caret"></b>
               </a>
               {{>headermenu}}
            </div>
         </div>
      </div>
      {{>loggeduser}}
   </div>
</header>

<div class="container-fluid">
   <div class="subnav">
      <ul class="nav nav-pills">
         <li><a href="#textonly">{{_i}}Wide Text Only Tiles{{/i}}</a></li>
         <li><a href="#imageonly">{{_i}}Wide Image Only Tiles{{/i}}</a></li>
         <li><a href="#imageandtext">{{_i}}Wide image-and-text Tiles{{/i}}</a></li>
      </ul>
   </div>
</div>

<div class="container-fluid metro">
   <div class="row-fluid">
      <div class="span12">


         <table id="apptile" class="table">
            <caption><h3>App Tile</h3></caption>
            <thead>
               <tr>
                  <th>Template Name</th>
                  <th>Description</th>
                  <th>Tile</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td><strong>Wide App Tile</strong></td>
                  <td></td>
                  <td>
                     <a class="tile wide app" href="#">
                        <div class="image-wrapper">
                           <img src="content/img/Windows 8.png" alt=""/>
                        </div>
                        <div class="app-label">AppName</div>
                        <div class="app-count">12</div>
                     </a>
                  </td>
               </tr>
            </tbody>
         </table>



         <table id="textonly" class="table">
            <caption><h3>Wide Text Only Tiles</h3></caption>
            <thead>
               <tr>
                  <th>Template Name</th>
                  <th>Description</th>
                  <th>Tile</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td><strong>TileWideText01</strong></td>
                  <td>One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text-header">Header</div>
                        <div class="text">Text field 1</div>
                        <div class="text">Text field 2</div>
                        <div class="text">Text field 3</div>
                        <div class="text">Text field 4</div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText02</strong></td>
                  <td>One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text-header">Header</div>
                        <div class="column">
                           <div class="text">Text field 1</div>
                           <div class="text">Text field 2</div>
                           <div class="text">Text field 3</div>
                           <div class="text">Text field 4</div>
                        </div>
                        <div class="column">
                           <div class="text">Text field 5</div>
                           <div class="text">Text field 6</div>
                           <div class="text">Text field 7</div>
                           <div class="text">Text field 8</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText03</strong></td>
                  <td>One string of large text wrapped over a maximum of three lines.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text-header3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula</div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText04</strong></td>
                  <td>One string of regular text wrapped over a maximum of five lines.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text5">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText05</strong></td>
                  <td>Five strings of regular text on five lines. Text does not wrap.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text">Text field 1 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                        <div class="text">Text field 2 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                        <div class="text">Text field 3 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                        <div class="text">Text field 4 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                        <div class="text">Text field 5 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText06</strong></td>
                  <td>Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="column">
                           <div class="text">Text field 1</div>
                           <div class="text">Text field 2</div>
                           <div class="text">Text field 3</div>
                           <div class="text">Text field 4</div>
                        </div>
                        <div class="column">
                           <div class="text">Text field 5</div>
                           <div class="text">Text field 6</div>
                           <div class="text">Text field 7</div>
                           <div class="text">Text field 8</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText07</strong></td>
                  <td>One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text-header">Header</div>
                        <div class="column2-label">
                           <div class="text">label 1</div>
                           <div class="text">label 2</div>
                           <div class="text">label 3</div>
                           <div class="text">label 4</div>
                        </div>
                        <div class="column2-text">
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText08</strong></td>
                  <td>Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="column2-label">
                           <div class="text">label 1</div>
                           <div class="text">label 2</div>
                           <div class="text">label 3</div>
                           <div class="text">label 4</div>
                           <div class="text">label 5</div>
                        </div>
                        <div class="column2-text">
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText09</strong></td>
                  <td>One header string in larger text over one string of regular text wrapped over a maximum of four lines.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text-header">Header</div>
                        <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText10</strong></td>
                  <td>One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="text-header">Header</div>
                        <div class="column3-label">
                           <div class="text">Viva</div>
                           <div class="text">Viva</div>
                           <div class="text">Viva</div>
                           <div class="text">Viva</div>
                        </div>
                        <div class="column3-text">
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideText11</strong></td>
                  <td>Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="column3-label">
                           <div class="text">Viva</div>
                           <div class="text">Viva</div>
                           <div class="text">Viva</div>
                           <div class="text">Viva</div>
                        </div>
                        <div class="column3-text">
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                           <div class="text">Vivamus elementum semper nisi</div>
                        </div>
                     </a>
                  </td>
               </tr>
            </tbody>
         </table>


         <table id="imageonly" class="table">
            <caption><h3>Wide Image Only Tiles</h3></caption>
            <thead>
               <tr>
                  <th>Template Name</th>
                  <th>Description</th>
                  <th>Tile</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td><strong>TileWideImage</strong></td>
                  <td>One wide image that fills the entire tile, no text.</td>
                  <td>
                     <a class="tile wide image" href="#">
                        <img src="content/img/tile-wide.jpg" alt=""/>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideImageCollection</strong></td>
                  <td>One large square image with four smaller square images to its right, no text.</td>
                  <td>
                     <a class="tile wide image collection" href="#">
                        <img class="tile-image-main" src="content/img/sample1.png" alt=""/>
                        <div class="mini-tiles">
                           <img src="content/img/tile-wide-collection-1.jpg" alt=""/>
                           <img src="content/img/tile-wide-collection-2.png" alt=""/>
                           <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                           <img src="content/img/tile-wide-collection-4.png" alt=""/>
                        </div>
                     </a>
                  </td>
               </tr>

            </tbody>
         </table>


         <table id="imageandtext" class="table">
            <caption><h3>Wide image-and-text templates</h3></caption>
            <thead>
               <tr>
                  <th>Template Name</th>
                  <th>Description</th>
                  <th>Tile</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td><strong>TileWideImageAndText01</strong></td>
                  <td>One wide image over one string of regular text wrapped over a maximum of two lines.</td>
                  <td>
                     <a class="tile wide imagetext wideimage" href="#">
                        <img src="content/img/tile-wide.jpg" alt=""/>
                        <div class="textover-wrapper">
                           <div class="text2">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideImageAndText02</strong></td>
                  <td>One wide image over one string of regular text wrapped over a maximum of two lines.</td>
                  <td>
                     <a class="tile wide imagetext wideimage" href="#">
                        <img src="content/img/tile-wide.jpg" alt=""/>
                        <div class="textover-wrapper">
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideBlockAndText01</strong></td>
                  <td>Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="column-text">
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </div>
                        <div class="column-text-big">
                           <div class="text-big">22</div>
                           <div class="text">Aliquam</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideBlockAndText02</strong></td>
                  <td>One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.</td>
                  <td>
                     <a class="tile wide text" href="#">
                        <div class="column-text">
                           <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </div>
                        <div class="column-text-big">
                           <div class="text-big">22</div>
                           <div class="text">Aliquam</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideSmallImageAndText01</strong></td>
                  <td>On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.</td>
                  <td>
                     <a class="tile wide imagetext" href="#">
                        <div class="image-wrapper">
                           <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                        </div>
                        <div class="column-text">
                           <div class="text-header3">Adipisci velit, sed quia non numquam eius modi tempora.</div>
                        </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideSmallImageAndText02</strong></td>
                  <td>On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.</td>
                  <td>
                     <a class="tile wide imagetext" href="#">
                        <div class="image-wrapper">
                           <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                        </div>
                        <div class="column-text">
                           <div class="text-header">Adipisci velit, sed quia non numquam eius modi tempora.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                       </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideSmallImageAndText03</strong></td>
                  <td>On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.</td>
                  <td>
                     <a class="tile wide imagetext" href="#">
                        <div class="image-wrapper">
                           <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                        </div>
                        <div class="column-text">
                           <div class="text5">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                       </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>TileWideSmallImageAndText04</strong></td>
                  <td>On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.</td>
                  <td>
                     <a class="tile wide imagetext" href="#">
                        <div class="image-wrapper">
                           <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                        </div>
                        <div class="column-text">
                           <div class="text-header">Adipisci velit, sed quia non numquam eius modi tempora.</div>
                           <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                       </div>
                     </a>
                  </td>
               </tr>
               <tr>
                  <td><strong>[TODO] TileWideSmallImageAndText05</strong></td>
                  <td>On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.</td>
                  <td>
                     <a class="tile tilewideblockandtext02" href="#">
                        <div class="tile-column">
                           <img src="content/img/tile-wide.jpg" alt=""/>
                        </div>
                     </a>
                  </td>
               </tr>

            </tbody>
         </table>

      </div>
   </div>
</div>